import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, TouchableHighlight } from 'react-native';
import { withTheme } from 'react-native-elements/src/config';

import FormInput from './FormInput';

class ListInput extends React.Component {

    static propTypes = {
        ...FormInput.propTypes,
        first: PropTypes.bool,
        onPress: PropTypes.func
    }

    render() {
        const { onPress, ...rest } = this.props;

        return <InputComponent {...rest} />;
    }
}

const InputComponent = ({ first, theme, ...rest }) => <FormInput
    {...rest}
    labelStyle={{
        fontSize: 18,
    }}
    containerStyle={StyleSheet.flatten([{
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 8,
        borderBottomWidth: 1,
        borderColor: theme.colors.grey3
    }, first && { borderTopWidth: 1 }, rest.containerStyle])}
    inputContainerStyle={{
        flex: 1,
        borderBottomWidth: 0
    }}
/>;

export default withTheme(ListInput);